<template>
  <view class="hpv_banner">
    <image
      src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg"
      mode="aspectFill"
    />
  </view>

  <!-- 筛选导航 -->
  <view class="hpv_nav">
    <view
      @click="selectHpvCate(item._id, index)"
      class="flex-item"
      v-for="(item, index) in tabNav"
      :key="item._id"
    >
      <text>{{ item.name }}</text>
      <view class="border" :class="navActive === index ? 'active' : ''"></view>
    </view>
  </view>
  <!-- hpv疫苗列表 -->
  <view class="hpv_list">
    <!-- 疫苗Item -->
    <view
      class="card m12 hpv_item"
      v-for="(item, index) in hpvSelectList"
      :key="item._id"
    >
      <text class="hpv_name">{{ item.name }}</text>
      <view class="hpv_age">
        <text v-for="(item2, index2) in item.describe" :key="index2">{{
          item2
        }}</text>
      </view>
      <view class="hpv_price">
        ￥{{ item.price[0] }}-￥{{ item.price[1] }}
      </view>
      <view
        class="submitYuYue"
        @click="
          goHpvYuyue({
            name: item.name,
            _id: item._id,
            price: item.price,
            describe: item.describe,
          })
        "
      >
        <text>去预约</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { hpvListApi } from "@/http/api";
import type { hpvNav, listItem } from "@/tsDataType/dataType";
//tab栏数组
const tabNav = ref<hpvNav[]>([]);
//定义hpv全部列表数组
const hpvList = ref<listItem[]>([]);
//定义筛选过滤的hpv列表数组
const hpvSelectList = ref<listItem[]>([]);

//进入页面拉取Hpv列表
onMounted(() => {
  getHpvList();
});

//去预约
interface optionsDataType {
  name: string;
  _id: string;
  price: string[];
  describe: string[];
}
const goHpvYuyue = (options: optionsDataType) => {
  const objStr = JSON.stringify(options);
  //将option参数通过路由跳转传递给hpv套餐详情页
  uni.navigateTo({
    url: `/pages/hpv/hpv_buy?obj=${objStr}`,
  });
};

//获取hpvList
const getHpvList = async () => {
  const res = await hpvListApi();
  console.log(res);
  tabNav.value = res.data.data[0].hpv_select;
  hpvList.value = res.data.data[0].hpv_list;
  hpvSelectList.value = res.data.data[0].hpv_list;
};

//点击tab导航筛选
const navActive = ref(0);
const selectHpvCate = (cateId: string, index: number) => {
  console.log(cateId);
  console.log(index);
  navActive.value = index;

  if (index !== 0) {
    hpvSelectList.value = hpvList.value.filter((item) => {
      return item.hpv_id === cateId;
    });
  } else {
    hpvSelectList.value = hpvList.value;
  }
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";

page {
  background: #e4e4e4;
}

.hpv_banner {
  width: 100%;
  height: 350rpx;
  image {
    width: 100%;
    height: 350rpx;
  }
}

//筛选导航样式
.hpv_nav {
  display: flex;
  justify-content: space-around;
  height: 80rpx;
  align-items: center;
  background: #fff;

  .flex-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    .border {
      width: 60rpx;
      position: absolute;
      bottom: 0;

      &.active {
        border: 2px solid #00f;
      }
    }
  }
}

// Hpv列表
.hpv_item {
  position: relative;
  .hpv_name {
    font-size: 18px;
  }

  .hpv_age {
    margin: 16rpx 0;
    text {
      padding: 10rpx;
      background: #e4e4e4;
      margin-right: 8px;
      border-radius: 10rpx;
    }
  }

  .hpv_price {
    color: #ea943e;
  }

  .submitYuYue {
    position: absolute;
    right: 20rpx;
    bottom: 10rpx;
    background: #4578fb;
    color: #fff;
    padding: 20rpx;
    border-radius: 30rpx;
  }
}
</style>
